<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios 调用方法发送请求</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
  <button id="btn2">点击发送 GET 请求2</button>
  <button id="btn3">点击发送 POST 请求2</button>
  <button id="btn4">点击发送 PUT 请求2</button>
  <button id="btn5">点击发送 DELETE 请求2</button>

  <script>
    /* 
    使用axios的静态方法发请求
      axios.get(url, config)
      axios.delete(url, config)
      axios.post(url, data, config)
      axios.put(url, data, config)
    */
    document.getElementById('btn5').onclick = async () => {
        // 发delete请求 + async & await
        try {
          // const response = await axios({
          //   url: 'http://localhost:3000/movie/7', // 指定param参数
          //   method: 'delete'
          // })
          const response = await axios.delete(
            'http://localhost:3000/movie/8',
            {
              params: {
                xxx: 123
              }
            }
          )
          console.log(response)
          alert(JSON.stringify(response.data))
        } catch (error) {
          console.log(error)
          alert(error.message)
        }
      }

    document.getElementById('btn4').onclick = async () => {
      // 发PUT请求 + async & await
      try {
        // const response = await axios({
        //   url: 'http://localhost:3000/movie/7', // 指定param参数
        //   method: 'PUT',
        //   data: {  // json格式请求体
        //     name: "220213电影",
        //     director: "220213导演"
        //   },
        // })
        const response = await axios.put(
          'http://localhost:3000/movie/7',
          {
            name: "220213电影",
            director: "220213导演"
          }
        )

        console.log(response)
        alert(JSON.stringify(response.data))
      } catch (error) {
        console.log(error)
        alert(error.message)
      }
    }

    document.getElementById('btn3').onclick = async () => {
      // 发POST请求 + async & await
      try {
        // const response = await axios({
        //   url: 'http://localhost:3000/movie',
        //   method: 'POST',
        //   data: {  // json格式请求体
        //     name: "某某电影",
        //     director: "某某导演"
        //   },
        //   data: 'name=某某电影2&director=某某导演2' // query字符串格式请求体
        // })
        const response = await axios.post(
          'http://localhost:3000/movie',
          {name: '好电影2', director: '好导演2'},
          { // 有意的添加配置
            params: { // query参数
              aa: 123
            }
          }
        )

        console.log(response)
        alert(JSON.stringify(response.data))
      } catch (error) {
        console.log(error)
        alert(error.message)
      }
    }

    document.getElementById('btn2').onclick = async () => {
      // 发get请求 + async & await
      try {
        // const response = await axios({ // 发GET请求带query参数
        //   url: 'http://localhost:3000/movie',
        //   params: { // 指定query参数, 而不是param参数
        //     id: 1
        //   }
        // })
        const response = await axios.get('http://localhost:3000/movie', {
          params: {
            id: 6
          }
        })
        console.log(response)
        alert(JSON.stringify(response.data))
      } catch (error) {
        console.log(error)
        alert(error.message)
      }
    }
    
  </script>
</body>
</html>